<template>
  <div class="chart-container">
    <chart height="100%" width="100%" :chart-data="ChartData" />
  </div>
</template>

<script>
import { getAgeRecent } from '@/api/dataanalysis'
import Chart from '@/components/Charts/LineMarker'

export default {
  name: 'LineChart',
  components: { Chart },
  data() {
    return {
      ChartData: {
        search: [],
        build: [],
        keep: [],
        run: [],
        daytime: []
      }
    }
  },
  created() {
    this.getDatas()
  },
  methods: {
    getDatas() {
      getAgeRecent().then((response) => {
        const json = { search: [], build: [], keep: [], run: [], daytime: [] }
        for (let i = 0; i < response.data.length; i++) {
          json.search[i] = response.data[i].search
          json.build[i] = response.data[i].build
          json.keep[i] = response.data[i].keep
          json.run[i] = response.data[i].run
          json.daytime[i] = response.data[i].daytime
        }
        this.ChartData = json
      })
    }
  }
}
</script>

<style scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: 500px;
}
</style>
